<template>
  <div class="energy-report">
    <div class="top-nav"></div>
    <div class="main-content">
      <div class="title-box">预算执行情况</div>
      <section class="top-main">
        <div class="energy-conservation">
          <div class="title-little-box">KPI预算</div>
        </div>
        <div class="equipment-operation">
          <div class="title-little-box">实际预算能耗报表</div>
        </div>
      </section>

      <section class="center-main">
        <div class="energy-analysis panel1">
          <div class="inner1">
            <div class="top-echart">
              <Skill :datas="showActualBudgetList"></Skill>
            </div>

            <div class="option-check">
              <span class="time_text">月份选择</span>

              <el-select
                v-model="value"
                @change="dateChange"
                placeholder="请选择"
                class="select-title-option"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>

        <section class="KPIpreparation-center">
          <div class="date-check-box">
            <Vechart class="option" :options="budgetpiesOption"></Vechart>
          </div>
          <div class="dispatch-box">
            <span class="now-value">实际能耗</span>
            <span class="now-value"
              >{{
                showRealityEnergyConsumptionData &&
                showRealityEnergyConsumptionData.accumValue
              }}kWh</span
            >
          </div>
          <div class="energy-table-box">
            <span class="budget-value">预算</span>
            <span class="budget-value"
              >{{
                showRealityEnergyConsumptionData &&
                showRealityEnergyConsumptionData.budgetValue
              }}kWh</span
            >
          </div>
        </section>

        <div class="report-table panel1">
          <div class="inner1">
            <div class="table-option">
              <div
                class="table-data-box"
                :style="{ height: isCenter ? '90%' : '100%' }"
              >
                <el-table
                  class="main2-table"
                  :row-class-name="rowClass"
                  :data="showTableList"
                  :cell-style="{
                    height: '50px',
                    color: '#84BFDD',
                    textAlign: 'center',
                  }"
                  :header-cell-style="{
                    background: '#102C44',
                    color: '#fff',
                    textAlign: 'center',
                    fontSize: '0.08rem',
                    heihgt: '50px',
                  }"
                  height="100%"
                >
                  <template slot="empty">
                    <p class="empty_text"></p>
                  </template>
                  <el-table-column
                    :prop="item.tag"
                    :label="item.name"
                    v-for="item in showTableTitles"
                    :key="item.tag"
                    :width="showTableTitles.length > 10 ? '124px' : 'auto'"
                  >
                    <template slot="header">
                      <div style="cursor: pointer">
                        {{ item.name }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div v-if="isCenter" class="option-check">
                <div
                  class="unit"
                  @click="checkInfo('area')"
                  :class="{ 'check-effect': slectTag === 'area' }"
                >
                  用电类型
                </div>
                <div
                  class="unit"
                  @click="checkInfo('air')"
                  :class="{ 'check-effect': slectTag === 'air' }"
                >
                  车站
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="bottom-main">
        <div class="time-line">
          <el-button
            v-for="(item, index) in yearList"
            :key="index"
            class="date-item"
            :class="{ 'current-time': year == item }"
            @click="yearQuery(item)"
          >
            {{ item }}年
          </el-button>
        </div>
        <!-- <div class="confirm_export" @click="confirmExport">导出</div> -->
      </section>
    </div>
  </div>
</template>
<script>
function getCurrentMonth() {
  var yesterday = new Date();
  var strMonth = yesterday.getMonth() + 1;
  if (strMonth < 10) {
    strMonth = "0" + strMonth;
  }
  return strMonth;
}
import Vechart from "../../components/charts/Vcharts";
import Skill from "../../components/skill/Skill";
import optionsRose from "./echartsjson/optionsRose.json";
import options1 from "./echartsjson/options1.json";
import budgetpies from "./echartsjson/budgetpies.json";
import { yearArray } from "../../utils/index.js";
import { mapState } from "vuex";
export default {
  name: "KPIpreparation",
  props: [
    "tableList",
    "tableTitles",
    "ActualBudgetList",
    "RealityEnergyConsumptionData",
  ],
  components: {
    Vechart,
    Skill,
  },
  data() {
    return {
      timeType: "电量",
      optionsRose: optionsRose,
      budgetpies: budgetpies,
      options1: options1,
      options: [
        {
          value: "01",
          label: "1月",
        },
        {
          value: "02",
          label: "2月",
        },
        {
          value: "03",
          label: "3月",
        },
        {
          value: "04",
          label: "4月",
        },
        {
          value: "05",
          label: "5月",
        },
        {
          value: "06",
          label: "6月",
        },
        {
          value: "07",
          label: "7月",
        },
        {
          value: "08",
          label: "8月",
        },
        {
          value: "09",
          label: "9月",
        },
        {
          value: "10",
          label: "10月",
        },
        {
          value: "11",
          label: "11月",
        },
        {
          value: "12",
          label: "12月",
        },
      ],
      value: getCurrentMonth(),
      colors: [
        "#EE6B86",
        "#E99114",
        "#E9EA8B",
        "#29DAD1",
        "#1CA7E9",
        "#545CBE",
      ],
      yearList: yearArray(),
      year: new Date().getFullYear() + "",
      slectTag: "area",
    };
  },

  methods: {
    rowClass({ row, column, rowIndex, columnIndex }) {
      if (row.time == "总计") {
        return "fixed-row";
      }
    },
    dateChange(v) {
      this.$emit("Selectmonth", v);
    },
    yearQuery(year) {
      this.$emit("Checkyear", year);
      this.year = year;
    },
  },
  computed: {
    ...mapState(["isCenter"]),
    showActualBudgetList() {
      return this.ActualBudgetList;
    },
    showRealityEnergyConsumptionData() {
      return this.RealityEnergyConsumptionData;
    },
    showTableList() {
      return this.tableList;
    },
    showTableTitles() {
      return this.tableTitles;
    },

    budgetpiesOption() {
      // return this.budgetpies;
      let datas = this.RealityEnergyConsumptionData;
      if (Object.keys(datas).length > 0) {
        return {
          ...this.budgetpies,
          title: {
            ...this.budgetpies.title,
            text: datas.budgetRatio + "%",
          },
          tooltip: {
            trigger: "item",
            formatter: function (params) {
              let tip = "";
              // console.log(params);
              if (params.seriesIndex === 1) {
                tip = "";
              } else if (params.seriesIndex === 0) {
                tip = `${params.name} : ${params.percent} %`;
              }
              return tip;
            },
            textStyle: {
              fontSize: 20,
              color: "#84BFDD",
            },
          },
          series: [
            {
              name: "耗电分布：",
              type: "pie",
              center: ["50%", "50%"],
              radius: ["35%", "55%"],
              label: {
                show: false,
              },
              labelLine: {
                length: 30,
              },
              data: [
                {
                  value: datas.accumValue,
                  name: "实际",
                },
                {
                  value: datas.budgetValue,
                  name: "预算",
                },
              ],
            },
            {
              name: "外边框",
              type: "pie",
              clockwise: false,
              radius: ["74%", "74%"],
              center: ["50%", "50%"],
              data: [
                {
                  value: 10,
                  normal: {
                    borderWidth: 8,
                    borderColor: "rgb(9,37,71, 0.5)",
                  },
                },
              ],
              label: {
                show: false,
              },
            },
          ],
        };
      } else {
        return this.budgetpies;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.energy-report {
  width: 100%;
  height: 100%;
  .top-nav {
    width: 10rem;
    height: 0.41rem;
  }
  .main-content {
    width: 10rem;
    height: calc(100% - 0.5rem);
    position: relative;
    .title-box {
      position: absolute;
      font-weight: bold;
      top: 10px;
      left: 0;
      font-size: 22px;
      color: #ffffff;
      text-align: center;
      width: 220px;
      height: 44px;
      line-height: 44px;
      background: url("../../assets/img/ti.png") no-repeat center;
      background-size: cover;
    }
    .top-main {
      width: 100%;
      height: 10%;
      display: flex;
      .energy-conservation {
        width: 50%;
        height: 100%;
      }
      .equipment-operation {
        width: 50%;
        height: 100%;
      }
    }
    .center-main {
      width: 100%;
      height: 80%;
      display: flex;
      justify-content: space-around;
      //   background-color: #fff;
      .energy-analysis {
        width: 36%;
        height: 100%;
        // background-color: #84bfdd;
        font-size: 20px;
        color: #fff;
        .top-echart {
          width: 100%;
          height: 90%;
        }

        .option-check {
          width: 100%;
          height: 10%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #050f23;
          user-select: none;
          .time_text {
            width: 120px;
            height: 40px;
            text-align: center;
            margin: 0 5px;
            font-size: 18px;
            color: #ffff;
            line-height: 40px;
          }

          .select-title-option {
            width: 74px;
            height: 40px;
            background: #091c37;
            border: none;
          }
        }
      }
      .KPIpreparation-center {
        width: 24%;
        height: 100%;
        .date-check-box {
          padding-bottom: 36px;
          width: 100%;
          height: 62%;
          background: url("../../assets/img/KPIbottom.png") no-repeat bottom
            center;
          // background-color: rgb(211, 225, 241);
        }
        .dispatch-box {
          width: 100%;
          height: 100px;
          // // margin: 2% 0;
          // background-color: #25bc5f;
          text-align: center;

          display: flex;
          font-weight: bold;
          .now-value {
            width: 100%;
            height: 100px;
            padding-left: 16px;
            font-size: 24px;
            line-height: 100px;
            color: #60e9fd;
          }
        }
        .energy-table-box {
          width: 100%;
          height: 100px;
          font-weight: bold;
          text-align: center;

          // background-color: #1a5585;
          display: flex;
          .budget-value {
            width: 100%;
            height: 100px;
            line-height: 100px;
            font-size: 24px;
            color: #39a8ff;
            padding-left: 16px;
          }
        }
      }
      .report-table {
        width: 36%;
        height: 100%;
        color: #fff;
        font-size: 20px;
        .table-option {
          background-color: #fff;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          .table-data-box {
            width: 100%;
            .main2-table {
              background-color: #050f23 !important;
            }
            /deep/.el-table tr {
              background-color: #050f23 !important;
            }
            /deep/.el-table__row.statistics-warning-row {
              background: #071635 !important;
            }
            /deep/.el-table__row.normal-now {
              background: #050f23 !important;
            }
          }
          .option-check {
            width: 100%;
            height: 10%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #050f23;
            user-select: none;
            .unit {
              cursor: pointer;
              margin: 0 20px;
              width: 150px;
              height: 44px;
              line-height: 44px;
              text-align: center;
              font-size: 15px;
              color: #28c2ff;
              border-radius: 10px;
              background-color: #0a73b1;
            }
            .check-effect {
              font-weight: bold;
              color: #eee;
              background-color: #2b70b2;
            }
          }
        }
      }
    }
    .bottom-main {
      width: 100%;
      height: 10%;
      position: relative;
      .confirm_export {
        position: absolute;
        cursor: pointer;
        top: 50%;
        right: 24%;
        width: 120px;
        height: 44px;
        transform: translateY(-50%);
        background: #091c37;
        border-radius: 6px;
        text-align: center;
        line-height: 44px;
        font-size: 16px;
        font-weight: bold;
        color: #28c2ff;
        border: 1px solid #0a73b1;
      }
      .time-line {
        width: 50%;
        margin: 0 auto;
        cursor: pointer;
        height: 100%;
        background: url("../../assets/img/timeline.png") no-repeat center center;
        background-size: contain;
        display: flex;
        justify-content: center;
        align-items: center;
        .date-item {
          // width: 1rem;
          height: 44px;
          margin: 0 20px;
          text-align: center;
          background: #091c37;
          border: 1px solid #0a73b1;
          font-size: 16px;
          color: #28c2ff;
          border-radius: 6px;
          // line-height: 44px;
        }
        .current-time {
          background: #2b70b2;
          color: #fff;
          border: 2px solid #2b70b2;
        }
      }
    }
    .title-little-box {
      width: 680px;
      font-size: 28px;
    }
  }
}
</style>
